import React, {useState} from 'react';
import {useNavigate, NavLink, useLocation} from "react-router-dom";
import styles from './index.module.scss';
import {
    timeout, sexs, objToArr, getUrlQuery,
} from "@/utils";
import {Input, Form, Button, message, Row, Col, Radio} from "antd";
import {register} from "../../service";
const Register = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = location.state;
    const model = {
        userName: '',
        userOrg: '',
        loginName: '',
        loginPwd: '',
        repPwd: '',
        userMobile: '',
        userEmail: '',
        userSex: 'MALE',
        userIdNo: '',
        userBirthDay: '',
        officePhone: '',
        userQq: '',
        userWx: '',
    };
    const [state, setState] = useState<any>({
        model,
        sexs: objToArr(sexs),
    });
    const toRegister = async (values) => {
        setState(Object.assign({...state},{
            model : values,
        }));
        register(values).then(res => {
            if (res.code === 200) {
                message.success('注册成功');
                const url = getUrlQuery('redirect');
                if (url) {
                    timeout(() => {
                        window.location.href = url;
                    }, 1200);
                }else {
                    navigate('/index');
                }
            }
        })
    };
    return (
        <div className={styles.root}>
            <div className='bg'>
                <div className='body'>
                    <p className="header-title">注册</p>
                    <div className="body-form">
                        <Form name="basic" labelAlign='left' onFinish={toRegister} layout="horizontal"
                              initialValues={state.model}>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="用户名" name="userName"
                                               rules={[{required: true, message: '请输入用户名!'}]}>
                                        <Input placeholder='请输入用户名'/>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="用户登录账号" name="loginName"
                                               rules={[{required: true, message: '请输入用户登录账号!'}]}>
                                        <Input placeholder='请输入用户登录账号'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="登录密码" name="loginPwd" hasFeedback
                                               rules={[{required: true, message: '请输入登录密码!'}]}>
                                        <Input placeholder='请输入登录密码'/>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="登录确认密码" name="repPwd" hasFeedback dependencies={['loginPwd']} rules={[
                                        {required: true, message: '请输入登录确认密码!'},
                                        ({getFieldValue}) => ({
                                            validator(_, value) {
                                                if (!value || getFieldValue('loginPwd') === value) {
                                                    return Promise.resolve();
                                                }
                                                return Promise.reject(new Error('密码和确认密码不一样!'));
                                            },
                                        }),
                                    ]}>
                                        <Input placeholder='请输入登录确认密码'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="手机号" name="userMobile" rules={[{required: true, message: '请输入手机号!'}]}>
                                        <Input placeholder='请输入手机号'/>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="用户邮箱" name="userEmail" rules={[{required: true, message: '请输入用户邮箱!'}]}>
                                        <Input placeholder='请输入用户邮箱'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="身份证号" name="userIdNo" rules={[{required: true, message: '请输入身份证号!'}]}>
                                        <Input placeholder='请输入身份证号'/>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="用户地址" name="userAddr" rules={[{required: false, message: '请输入用户地址!'}]}>
                                        <Input placeholder='请输入用户地址'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="用户性别" name='userSex' rules={[{required: false, message: '请选择性别!'}]}>
                                        <Radio.Group>
                                            {
                                                state.sexs.map(item => {
                                                    return <Radio key={item.value} value={item.key}>{item.value}</Radio>;
                                                })
                                            }
                                        </Radio.Group>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="用户QQ" name="userQq" rules={[{required: false, message: '请输入用户QQ!'}]}>
                                        <Input placeholder='请输入用户QQ'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Form.Item label="用户微信" name="userWx" rules={[{required: false, message: '请输入用户微信!'}]}>
                                        <Input placeholder='请输入用户微信'/>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="用户办公室电话" name="officePhone" rules={[{required: false, message: '请输入用户办公室电话!'}]}>
                                        <Input placeholder='请输入用户办公室电话'/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <Form.Item label="描述" name="remark" rules={[{required: false, message: '请输入描述信息!'}]}>
                                        <Input.TextArea placeholder="请输入描述信息......"/>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <div className="bottom">
                                <Button type="primary" htmlType="submit">注册</Button>
                                <p>
                                    <NavLink to='/login'>已有账号，去登录&gt;&gt;</NavLink>
                                </p>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default Register;
